<html><!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>KISSY Simple Tree</title>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/css/dpl/--base.css,badges.css,forms.css,icons.css,labels.css,tables.css-20130815" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/css/dpl/??base.css,badges.css,forms.css,icons.css,labels.css,tables.css?20130815"
            rel="stylesheet"/>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/fi000001.css" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/??button/assets/dpl.css,calendar/assets/dpl.css,menu/assets/dpl.css,combobox/assets/dpl.css,menubutton/assets/dpl.css,overlay/assets/dpl.css,split-button/assets/dpl.css,tabs/assets/dpl.css,toolbar/assets/dpl.css,tree/assets/dpl.css?20130815"
            rel="stylesheet"/>

    <link href="../assets/docs.css-20130815" tppabs="http://docs.kissyui.com/1.3/dpl/assets/docs.css?20130815" rel="stylesheet"/>
    <link rel="stylesheet" href="../assets/prettify.css-20130815" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.css?20130815">
    <script type="text/javascript" src="../assets/prettify.js" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div class="container">
    <div class="row-fluid">
        <div class="span8">
            <h1>KISSY Simple Tree</h1>

            <a href="javascript:void(0)" id="expandAll" class="ks-button">展开全部</a>&nbsp;
            <a href="javascript:void(0)" id="collapseAll" class="ks-button">关闭全部</a>

            <div id="treeContainer1" style="width: 200px;margin: 20px 0;">

            </div>            
        </div>
        <div class="span16">
            <div style="height:20px"></div>
<pre class="prettyprint linenums">
KISSY.use("tree", function (S, Tree) {
    var $ = S.all;
    var tree = new Tree({
        content: "淘宝网",
        expanded: true,
        // showRootNode:false,
        render: "#treeContainer1"
    });
    var favorates = new Tree.Node({
        content: "收藏夹",
        tree: tree
    });
    favorates.addChild(new Tree.Node({
        content: "收藏的宝贝"
    }));
    favorates.addChild(new Tree.Node({
        // 即使没有儿子也强制指定为 folder 样式
        isLeaf: false,
        content: "收藏的店铺"
    }));
    tree.addChild(favorates);
    tree.addChild(new Tree.Node({
        content: "我要买"
    }));
    var one = new Tree.Node({
        content: "我的淘宝",
        tree: tree
    });
    one.addChild(new Tree.Node({
        content: "已买到的宝贝"
    }));
    one.addChild(new Tree.Node({
        content: "已卖出的宝贝"
    }));
    tree.addChild(one);
    tree.render();
    tree.on("expand", function (e) {
        S.log("expand : " + e.target.get("content"));
        S.log("expandIconEl");
        S.log(e.target.get("expandIconEl"));
        S.log("iconEl");
        S.log(e.target.get("iconEl"));
    });
    tree.on("collapse", function (e) {
        S.log("collapse : " + e.target.get("content"));
    });
    tree.on("click", function (e) {
        S.log("action : " + e.target.get("content"));
    });
    $("#expandAll").on("click", function () {
        tree.expandAll();
    });
    $("#collapseAll").on("click", function () {
        tree.collapseAll();
    });
});
</pre>            
        </div>
    </div>
    <hr>
    <div class="row-fluid">
        <div class="span8">
            <h1>KISSY Check Tree</h1>


            <a href="javascript:void(0)" id="expandAll-check" class="ks-button">展开全部</a>&nbsp;
            <a href="javascript:void(0)" id="collapseAll-check" class="ks-button">关闭全部</a>

            <div id="treeContainer2" style="width: 200px;margin: 20px 0;">

            </div>            
        </div>
        <div class="span16">
<pre class="prettyprint linenums">
KISSY.use("tree", function (S, Tree) {
    var $ = S.all;
    var tree = new Tree.CheckTree({
        content: "淘宝网",
        expanded: true,
        // showRootNode:false,
        render: "#treeContainer2"
    });
    var favorates = new Tree.CheckNode({
        content: "收藏夹",
        tree: tree
    });
    favorates.addChild(new Tree.CheckNode({
        content: "收藏的宝贝"
    }));
    favorates.addChild(new Tree.CheckNode({
        content: "收藏的店铺"
    }));
    tree.addChild(favorates);
    tree.addChild(new Tree.CheckNode({
        content: "我要买"
    }));
    var one = new Tree.CheckNode({
        content: "我的淘宝",
        tree: tree
    });
    one.addChild(new Tree.CheckNode({
        content: "已买到的宝贝"
    }));
    one.addChild(new Tree.CheckNode({
        content: "已卖出的宝贝"
    }));
    tree.addChild(one);
    tree.render();
    tree.on("click", function (e) {
        S.log("action : " + e.target.get("content"));
    });
    $("#expandAll-check").on("click", function () {
        tree.expandAll();
    });
    $("#collapseAll-check").on("click", function () {
        tree.collapseAll();
    });
});
</pre>            
        </div>

    </div>
    <hr>
    <div class="row-fluid">
        <div class="span8">
            <h1>KISSY Decorated Simple Tree</h1>


            <a href="javascript:void(0)" id="expandAll-decorate" class="ks-button">展开全部</a>&nbsp;
            <a href="javascript:void(0)" id="collapseAll-decorate" class="ks-button">关闭全部</a>

            <div id="treeContainer3" style="width: 200px;margin: 20px 0;">

                <div id='root1' class="ks-tree">
                    <span class="ks-tree-node-content">淘宝网</span>

                    <div class="ks-tree-children">
                        <div class="ks-tree-node">
                            <span class="ks-tree-node-content">收藏夹</span>

                            <div class="ks-tree-children">
                                <div class="ks-tree-node">
                                    <span class="ks-tree-node-content">收藏的宝贝</span>
                                </div>

                                <div class="ks-tree-node ks-tree-node-folder">
                                    <span class="ks-tree-node-content">收藏的店铺</span>
                                </div>
                            </div>
                        </div>
                        <div class="ks-tree-node">
                            <span class="ks-tree-node-content">我要买</span>
                        </div>
                    </div>
                </div>

            </div>            
        </div>
        <div class="span16">
            <pre class="prettyprint linenums">
KISSY.use("tree", function (S, Tree) {
    var $ = S.all;
    var tree = new Tree({
        expanded: true,
        // showRootNode:false,
        srcNode: "#root1"
    });
    tree.render();
    tree.on("click", function (e) {
        S.log("action : " + e.target.get("content"));
    });
    $("#expandAll-decorate").on("click", function () {
        tree.expandAll();
    });
    $("#collapseAll-decorate").on("click", function () {
        tree.collapseAll();
    });
});                
            </pre>
        </div>
    </div>
    <hr>
    <div class="row-fluid">
        <div class="span8">
            <h1>KISSY Decorated Check Tree</h1>


            <a href="javascript:void(0)" id="expandAll-decorate-check" class="ks-button">展开全部</a>&nbsp;
            <a href="javascript:void(0)" id="collapseAll-decorate-check" class="ks-button">关闭全部</a>

            <div id="treeContainer4" style="width: 200px;margin: 20px 0;">

                <div id='root2' class="ks-tree">
                    <span class="ks-tree-node-content">淘宝网</span>

                    <div class="ks-tree-children">
                        <div class="ks-tree-node ks-check-tree-node">
                            <span class="ks-tree-node-content">收藏夹</span>

                            <div class="ks-tree-children">
                                <div class="ks-tree-node ks-check-tree-node">
                                    <span class="ks-tree-node-content">收藏的宝贝</span>
                                </div>
                                <div class="ks-tree-node ks-check-tree-node">
                                    <span class="ks-tree-node-content">收藏的店铺</span>
                                </div>
                            </div>
                        </div>

                        <div class="ks-tree-node ks-check-tree-node">
                            <span class="ks-tree-node-content">我要买</span>
                        </div>
                    </div>
                </div>

            </div>            
        </div>
        <div class="span16">
            <pre class="prettyprint linenums">
KISSY.use("tree", function (S, Tree) {
    var $ = S.all;

    var tree = new Tree.CheckTree({
        content: "淘宝网",

        expanded: true,
        // showRootNode:false,
        srcNode: "#root2"
    });

    tree.render();

    tree.on("click", function (e) {
        S.log("action : " + e.target.get("content"));
    });

    $("#expandAll-decorate-check").on("click", function () {
        tree.expandAll();
    });

    $("#collapseAll-decorate-check").on("click", function () {
        tree.collapseAll();
    });
});                
            </pre>
        </div>
    </div>
    <hr>

    <div class="row-fluid">
        <div class="span8">
            <h1>KISSY Lazy Tree</h1>

            <div id="treeContainer5" style="width: 200px;">

            </div>
        </div>
        <div class="span16">
            <pre class="prettyprint linenums">
KISSY.use("tree", function (S, Tree) {
    var $ = S.all;
    var data = {
        content: "淘宝网",
        children: [
            {
                content: "收藏夹",
                children: [
                    {
                        content: "收藏的宝贝"
                    },
                    {
                        content: "收藏的店铺"
                    }
                ]
            },
            {
                content: "我的淘宝",
                children: [
                    {
                        content: "已买到的宝贝"
                    },
                    {
                        content: "已卖出的宝贝"
                    }
                ]
            }
        ]
    };
    function getNode(node, content) {
        if (node.content == content) {
            return node;
        }
        var c = node.children || [];
        for (var i = 0; i < c.length; i++) {
            var t = getNode(c[i], content);
            if (t) {
                return t;
            }
        }
        return null;
    }
    var tree = new Tree({
        content: "淘宝网",
        isLeaf: false,
        // showRootNode:false,
        render: "#treeContainer5"
    });
    tree.on("expand", function (e) {
        var node = e.target;
        if (!node.get("children").length) {
            var c = getNode(data, node.get("content")).children;
            S.each(c, function (v) {
                node.addChild(new Tree.Node({
                    isLeaf: !(v.children && v.children.length),
                    content: v.content
                }));
            });
        }
    });
    tree.render();
});                
            </pre>
        </div>
    </div>
    <hr>

    <div class="row-fluid">
        <div class="span8">

            <h1>KISSY Lazy Check Tree</h1>

            <div id="treeContainer6" style="width: 200px;">

            </div> 
        </div>
        <div class="span16">
            <pre class="prettyprint linenums">
KISSY.use("tree", function (S, Tree) {
    var $ = S.all;
    var data = {
        content: "淘宝网",
        children: [
            {
                content: "收藏夹",
                children: [
                    {
                        content: "收藏的宝贝"
                    },
                    {
                        content: "收藏的店铺"
                    }
                ]
            },
            {
                content: "我的淘宝",
                children: [
                    {
                        content: "已买到的宝贝"
                    },
                    {
                        content: "已卖出的宝贝"
                    }
                ]
            }
        ]
    };
    function getNode(node, content) {
        if (node.content == content) {
            return node;
        }
        var c = node.children || [];
        for (var i = 0; i < c.length; i++) {
            var t = getNode(c[i], content);
            if (t) {
                return t;
            }
        }
        return null;
    }
    var tree = new Tree.CheckTree({
        content: "淘宝网",
        isLeaf: false,
        // showRootNode:false,
        render: "#treeContainer6"
    });
    var CheckNode = Tree.CheckNode;
    tree.on("expand", function (e) {
        var node = e.target;
        if (!node.get("children").length) {
            var c = getNode(data, node.get("content")).children;
            S.each(c, function (v) {
                node.addChild(new Tree.CheckNode({
                    isLeaf: !(v.children && v.children.length),
                    checkState: node.get("checkState") == CheckNode.CHECK ? CheckNode.CHECK : CheckNode.EMPTY,
                    content: v.content
                }));
            });
        }
    });
    tree.render();
});                
            </pre>
        </div>
    </div>

    <hr>

    <div class="row-fluid">
        <div class="span8">
            <h1>KISSY Simple Tree using xclass</h1>


            <a href="javascript:void(0)" id="expandAll-xclass" class="ks-button">展开全部</a>&nbsp;
            <a href="javascript:void(0)" id="collapseAll-xclass" class="ks-button">关闭全部</a>

            <div id="treeContainer7" style="width: 200px;margin: 20px 0;">

            </div>            
        </div>
        <div class="span16">
            <pre class="prettyprint linenums">
KISSY.use("tree", function (S, Tree) {
    var $ = S.all;
    var tree = new Tree({
        content: "淘宝网",
        expanded: true,
        children: [
            {
                
                content: "收藏夹",
                children: [
                    {
                        
                        content: "收藏的宝贝"
                    },
                    {
                        
                        content: "收藏的店铺"
                    }
                ]
            },
            {
                
                content: '我要买'
            },
            {
                
                content: '我的淘宝',
                children: [
                    {
                        
                        content: "已买到的宝贝"
                    },
                    {
                        
                        content: "已买到的宝贝"
                    }
                ]
            }
        ],
        // showRootNode:false,
        render: "#treeContainer7"
    });
    tree.render();
    tree.on("expand", function (e) {
        S.log("expand : " + e.target.get("content"));
        S.log("expandIconEl");
        S.log(e.target.get("expandIconEl"));
        S.log("iconEl");
        S.log(e.target.get("iconEl"));
    });
    tree.on("collapse", function (e) {
        S.log("collapse : " + e.target.get("content"));
    });
    tree.on("click", function (e) {
        S.log("action : " + e.target.get("content"));
    });
    $("#expandAll-xclass").on("click", function () {
        tree.expandAll();
    });
    $("#collapseAll-xclass").on("click", function () {
        tree.collapseAll();
    });
});                
            </pre>
        </div>
    </div>

</div>

<script src="../../../../g.tbcdn.cn/kissy/k/1.3.1/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/seed.js" data-config="{combine:true}"></script>

    <script>
        KISSY.use("tree", function (S, Tree) {
            var $ = S.all;
            var tree = new Tree({
                content: "淘宝网",

                expanded: true,
                // showRootNode:false,
                render: "#treeContainer1"
            });

            var favorates = new Tree.Node({

                content: "收藏夹",
                tree: tree
            });

            favorates.addChild(new Tree.Node({

                content: "收藏的宝贝"
            }));

            favorates.addChild(new Tree.Node({

                // 即使没有儿子也强制指定为 folder 样式
                isLeaf: false,
                content: "收藏的店铺"
            }));

            tree.addChild(favorates);

            tree.addChild(new Tree.Node({

                content: "我要买"
            }));


            var one = new Tree.Node({

                content: "我的淘宝",
                tree: tree
            });

            one.addChild(new Tree.Node({

                content: "已买到的宝贝"
            }));

            one.addChild(new Tree.Node({

                content: "已卖出的宝贝"
            }));

            tree.addChild(one);

            tree.render();


            tree.on("expand", function (e) {
                S.log("expand : " + e.target.get("content"));
                S.log("expandIconEl");
                S.log(e.target.get("expandIconEl"));
                S.log("iconEl");
                S.log(e.target.get("iconEl"));
            });

            tree.on("collapse", function (e) {
                S.log("collapse : " + e.target.get("content"));
            });

            tree.on("click", function (e) {
                S.log("action : " + e.target.get("content"));
            });

            $("#expandAll").on("click", function () {
                tree.expandAll();
            });

            $("#collapseAll").on("click", function () {
                tree.collapseAll();
            });
        });
    </script>
    <script>
        KISSY.use("tree", function (S, Tree) {
            var $ = S.all;
            var tree = new Tree.CheckTree({
                content: "淘宝网",

                expanded: true,
                // showRootNode:false,
                render: "#treeContainer2"
            });

            var favorates = new Tree.CheckNode({

                content: "收藏夹",
                tree: tree
            });

            favorates.addChild(new Tree.CheckNode({

                content: "收藏的宝贝"
            }));

            favorates.addChild(new Tree.CheckNode({

                content: "收藏的店铺"
            }));

            tree.addChild(favorates);

            tree.addChild(new Tree.CheckNode({

                content: "我要买"
            }));


            var one = new Tree.CheckNode({

                content: "我的淘宝",
                tree: tree
            });

            one.addChild(new Tree.CheckNode({

                content: "已买到的宝贝"
            }));

            one.addChild(new Tree.CheckNode({

                content: "已卖出的宝贝"
            }));

            tree.addChild(one);

            tree.render();


            tree.on("click", function (e) {
                S.log("action : " + e.target.get("content"));
            });

            $("#expandAll-check").on("click", function () {
                tree.expandAll();
            });

            $("#collapseAll-check").on("click", function () {
                tree.collapseAll();
            });
        });
    </script>    

    <script>
        KISSY.use("tree", function (S, Tree) {
            var $ = S.all;

            var tree = new Tree({
                expanded: true,
                // showRootNode:false,
                srcNode: "#root1"
            });

            tree.render();

            tree.on("click", function (e) {
                S.log("action : " + e.target.get("content"));
            });

            $("#expandAll-decorate").on("click", function () {
                tree.expandAll();
            });

            $("#collapseAll-decorate").on("click", function () {
                tree.collapseAll();
            });
        });
    </script>
    <script>
        KISSY.use("tree", function (S, Tree) {
            var $ = S.all;

            var tree = new Tree.CheckTree({
                content: "淘宝网",

                expanded: true,
                // showRootNode:false,
                srcNode: "#root2"
            });

            tree.render();

            tree.on("click", function (e) {
                S.log("action : " + e.target.get("content"));
            });

            $("#expandAll-decorate-check").on("click", function () {
                tree.expandAll();
            });

            $("#collapseAll-decorate-check").on("click", function () {
                tree.collapseAll();
            });
        });
    </script>  
    <script>
        KISSY.use("tree", function (S, Tree) {
            var $ = S.all;

            var data = {
                content: "淘宝网",
                children: [
                    {
                        content: "收藏夹",
                        children: [
                            {
                                content: "收藏的宝贝"
                            },
                            {
                                content: "收藏的店铺"
                            }
                        ]
                    },
                    {
                        content: "我的淘宝",
                        children: [
                            {
                                content: "已买到的宝贝"
                            },
                            {
                                content: "已卖出的宝贝"
                            }
                        ]
                    }
                ]
            };

            function getNode(node, content) {
                if (node.content == content) {
                    return node;
                }
                var c = node.children || [];
                for (var i = 0; i < c.length; i++) {
                    var t = getNode(c[i], content);
                    if (t) {
                        return t;
                    }
                }
                return null;
            }

            var tree = new Tree({
                content: "淘宝网",

                isLeaf: false,
                // showRootNode:false,
                render: "#treeContainer5"
            });
            tree.on("expand", function (e) {
                var node = e.target;
                if (!node.get("children").length) {
                    var c = getNode(data, node.get("content")).children;
                    S.each(c, function (v) {
                        node.addChild(new Tree.Node({

                            isLeaf: !(v.children && v.children.length),
                            content: v.content
                        }));
                    });
                }
            });
            tree.render();
        });
    </script>   
    <script>
        KISSY.use("tree", function (S, Tree) {
            var $ = S.all;

            var data = {
                content: "淘宝网",
                children: [
                    {
                        content: "收藏夹",
                        children: [
                            {
                                content: "收藏的宝贝"
                            },
                            {
                                content: "收藏的店铺"
                            }
                        ]
                    },
                    {
                        content: "我的淘宝",
                        children: [
                            {
                                content: "已买到的宝贝"
                            },
                            {
                                content: "已卖出的宝贝"
                            }
                        ]
                    }
                ]
            };

            function getNode(node, content) {
                if (node.content == content) {
                    return node;
                }
                var c = node.children || [];
                for (var i = 0; i < c.length; i++) {
                    var t = getNode(c[i], content);
                    if (t) {
                        return t;
                    }
                }
                return null;
            }

            var tree = new Tree.CheckTree({
                content: "淘宝网",

                isLeaf: false,
                // showRootNode:false,
                render: "#treeContainer6"
            });

            var CheckNode = Tree.CheckNode;

            tree.on("expand", function (e) {
                var node = e.target;
                if (!node.get("children").length) {
                    var c = getNode(data, node.get("content")).children;
                    S.each(c, function (v) {
                        node.addChild(new Tree.CheckNode({
                            isLeaf: !(v.children && v.children.length),
                            checkState: node.get("checkState") == CheckNode.CHECK ? CheckNode.CHECK : CheckNode.EMPTY,
                            content: v.content
                        }));
                    });
                }
            });
            tree.render();
        });
    </script>
    <script>
        KISSY.use("tree", function (S, Tree) {
            var $ = S.all;
            var tree = new Tree({
                content: "淘宝网",
                expanded: true,
                children: [
                    {
                        
                        content: "收藏夹",
                        children: [
                            {
                                
                                content: "收藏的宝贝"
                            },
                            {
                                
                                content: "收藏的店铺"
                            }
                        ]
                    },
                    {
                        
                        content: '我要买'
                    },
                    {
                        
                        content: '我的淘宝',
                        children: [
                            {
                                
                                content: "已买到的宝贝"
                            },
                            {
                                
                                content: "已买到的宝贝"
                            }
                        ]
                    }
                ],
                // showRootNode:false,
                render: "#treeContainer7"
            });
            tree.render();
            tree.on("expand", function (e) {
                S.log("expand : " + e.target.get("content"));
                S.log("expandIconEl");
                S.log(e.target.get("expandIconEl"));
                S.log("iconEl");
                S.log(e.target.get("iconEl"));
            });
            tree.on("collapse", function (e) {
                S.log("collapse : " + e.target.get("content"));
            });
            tree.on("click", function (e) {
                S.log("action : " + e.target.get("content"));
            });
            $("#expandAll-xclass").on("click", function () {
                tree.expandAll();
            });
            $("#collapseAll-xclass").on("click", function () {
                tree.collapseAll();
            });
        });
    </script>        
</body>
</html>